<template>
  <div id="app" class="card">
    <a-row type="flex" :gutter="[14, 38]">
      <!-- 班级 -->
      <a-col :span="4">
        <a-card
          :bordered="true"
          :bodyStyle="bodyStyle"
          class="card-shadow card-radius"
          style="height: 100%;text-align: center;"
        >
          <div class="data-title">
            <p>{{ cardTitle }}</p>
          </div>
          <a-spin :spinning="classLoading">
            <div class="data-main" >
              <p
                v-for="(item, index) in classList"
                :key="item.id"
                @click="viewData(item, index)"
                class="data-main-class"
                :style="{'justify-content':item.averageData?'space-between':'center'}"
                :class="className == item.className ? 'data-active' : ''"
              >
                <span>{{ item.className }}</span>
                <span>{{ item.averageData }}</span>
              </p>
            </div>
          </a-spin>
        </a-card>
      </a-col>

      <a-col :span="span[0]">
        <a-card
          :bordered="true"
          :bodyStyle="bodyStyle"
          class="card-shadow card-radius"
          style="height: 100%;text-align: center;"
        >
          <a-row type="flex" justify="space-between">
            <a-col class="data-title">
              <p v-if="centerCardTitle">{{ centerCardTitle }}</p>
              <p v-else>{{ className }}</p>
            </a-col>
            <a-col>
              <slot name="centerViewBtn"></slot>
            </a-col>
          </a-row>
          <p class="data-time">数据更新时间：{{ dataDate }}</p>
          <slot name="centerData"></slot>
        </a-card>
      </a-col>

      <a-col :span="span[1]">
        <a-card
          :bordered="true"
          :bodyStyle="bodyStyle"
          class="card-shadow card-radius"
          style="height: 100%;text-align: center;"
        >
          <a-row type="flex" justify="space-between">
            <a-col class="data-title">
              <slot name="leftTitle"></slot>
            </a-col>
            <a-col>
              <slot name="rightViewBtn"></slot>
            </a-col>
          </a-row>
          <slot name="rightData"></slot>
        </a-card>
      </a-col>
      <a-col :span="span[2]">
        <a-card
          :bordered="true"
          :bodyStyle="bodyStyle"
          class="card-shadow card-radius"
          style="height: 100%;text-align: center;"
        >
          <a-row type="flex" justify="space-between">
            <a-col class="data-title">
              <slot name="IntimacyTitle"></slot>
            </a-col>
            <a-col>
              <slot name="IntimacyViewBtn"></slot>
            </a-col>
          </a-row>
          <slot name="IntimacyData"></slot>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import '@/assets/less/ClassAndCard.less'
import { skClassList } from '@/api/management.js'

export default {
  name: 'card',
  props:{
    // 左侧卡片名称
    cardTitle:{
      type:String,
      default:""
    },
    // 左侧卡片班级平均数
    classCount:{
      type:Array,
      default:()=>[]
    },
    // 中间卡片名称
    centerCardTitle:{
      type:String,
      default:""
    },
    span:{
      type:Array,
      default:()=>{
        return [10,10,0]
      }
    },
  },
  data() {
    return {
      bodyStyle: { padding: '20px' },
      className: '全园',
      classList:[],
      dataDate:"",
      classLoading:false
    }
  },
  components: {},

  filters: {},

  computed: {
    // classList(){
    //   this.$store.state.skCommon.classList;
    // }
  },
  watch:{
    classCount(val){
      this.classList.map(item=>{
        val.map(obj=>{
          if (item.className == obj.className) {
            item.averageData = obj.count
          }
        })
      })
    },
  },
  created() {
    this.getClassList()
  },
  activated() {},

  mounted() {
    console.log(this.span);
  },

  methods: {
    viewData(item, i) {
      this.className = item.className;
      this.$emit('className', {className:this.className,classId:item.id})
    },
    // 获取所有的班级
    getClassList() {
      this.classLoading = true;
      this.dataDate = this.$skCommon.getDate(1);
      skClassList()
        .then(res => {
          if (res.success) {
            this.classList = res.result;
            this.classList.unshift({ className: '全园' })
          } else {
            this.$message.warning(res.message)
          }
          this.classLoading = false;
        })
        .catch(error => {
          console.error(error)
        })
    },
  }
}
</script>
<style scoped lang="less">
.data-time {
  text-align: left;
}
</style>
